<template>
    <div class="contianer">
        <el-row :gutter="20">
            <el-col :span="16" class="leftMain">
                <div class="oneArtcle" v-for="articleData in tableData">
                    <img class="articleImg" :src="articleData.fileUid" alt="加载失败" @click="oneArticle(articleData)">
                    <div class="articleMess" @click="oneArticle(articleData)">
                        <p class="titleList" v-html="articleData.title" @click="oneArticle(articleData)"></p>
                        <p class="summary" v-html="articleData.summary" @click="oneArticle(articleData)"></p>
                        <div class="articleMessData" @click="oneArticle(articleData)">
                            <div class="createdTime">
                                <p>发布时间</p>
                                <p v-html="articleData.createdTime"></p>
                            </div>
                            <div class="clickCount">
                                <p v-html="articleData.clickCount"></p>
                                <p>阅读</p>
                            </div>
                            <div class="clickCount">
                                <p v-html="articleData.clickCount"></p>
                                <p>点赞</p>
                            </div>
                            <div class="collectCount">
                                <p v-html="articleData.collectCount"></p>
                                <p>收藏</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="6" class="leftMain">
                <el-button @click="addArticle()" style="margin-left: 5%;">添加文章</el-button>
            </el-col>

        </el-row>
    </div>
</template>

<script>
export default {
    name: "articleAdmin",
    data() {
        return {
            tableData: [
                
            ],
        };
    },
    watch: {
    },
    created() {
        this.findAllArticle();
    },
    methods: {
        //查询所有文章
        findAllArticle(){
            this.$axios.get("api/blog/findAllArticle").then((res)=>{
                if(res.data.success){
                    this.tableData = res.data.data.userList;
                }else{
                    this.$message({
                        type:"error",
                        message:"查询失败"
                    })
                }
            })
        },

        //点击查看文章详情  
        oneArticle(articleData) {
            sessionStorage.setItem("id",JSON.stringify(articleData.id));
            this.$router.push({
                name: 'oneArticle'
            });
        },
        addArticle() {
            this.$router.push({
                name: 'addArticle'
            });
        }

    }
};

</script>

<style scoped>
.articleMessData {
    height: 0px;
}

.summary {
    height: 50px;
    font-size: 10px;
    /*弹性伸缩盒子*/
    display: -webkit-box;
    /*垂直排列*/
    -webkit-box-orient: vertical;
    /*只显示3行*/
    line-clamp: 3;
    -webkit-line-clamp: 3;
    /*溢出隐藏*/
    overflow: hidden;
    /*省略号代替*/
    text-overflow: ellipsis;
    position: relative;
    top: -15px;
    user-select: none;
}

.titleList {
    color: black;
    height: 20px;
    position: relative;
    top: -10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}


.articleMessData p {
    float: left;
    margin-right: 25px;
    font-size: 10px;
    position: relative;
    top: -30px;
    user-select: none;
}

.articleMessData p:nth-child(1) {
    float: left;
    margin-right: 5px;
    font-size: 10px;
    position: relative;
    top: -30px;
}


.contianer {
    min-width: 1200px;
}

.leftMain {
    margin: 25px;
}

.rigthMain {
    background-color: #cccccc;
}

.oneArtcle {
    min-width: 900px;
    width: 900px;
    margin: 0 auto;
    height: 120px;
    margin-bottom: 10px;
    border-bottom: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    border-top: solid 1px #e3e2e2;
    border-left: solid 1px #e3e2e2;
    padding: 5px;
}


.articleImg {
    background-color: white;
    float: left;
    width: 110px;
    height: 110px;
    margin: 5px;

}

.articleMess {
    float: left;

    width: 75%;
    height: 110px;
    margin: 5px;
}
</style>